<template>
	<view>
		<view class="container">
			<view class="main-containner">
				<view class="title">
					<input type="text" placeholder="输入标题" style="margin-left: 5%;margin-right: 5%; font-size: 36rpx;"
						@input="titleInput">
				</view>
				<!-- 输入信息 -->
				<textarea name="" :maxlength="-1" style="width: 100%; margin-top: 5%;" placeholder="输入商品内容"
					v-model="goods.detail"></textarea>
			</view>

			<!-- 选择图片后的展示区 -->
			<view class="des">温馨提示：第一张图片就是首页图</view>
			<view class="img">
				<block v-for="(item,i) in img" :key="i">
					<view class="img2">
						<view @click="deletePic(i)">x</view>
						<image bindtap="previewImage" :src="item.tempFilePath"></image>
					</view>
				</block>
				<view v-if="img.length<9" bindtap="uploadToCloud"
					style="width: 190rpx;height: 190rpx;background-color: #efefef; margin-top: 30rpx;border-radius: 10px;"
					@click="selectPic">
					<uni-icons type="plus" size="90" style="margin-left: 8rpx;"></uni-icons>
				</view>
			</view>

			<!-- 设置价格和电话号码 -->
			<view class="last-containner">
				<view class="price" @click="setPrice">
					<view class="">
						￥价格
					</view>
					<view class="price-num">
						￥{{price}}<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="publish-container">
			<view class="publish">
				<button class="publish-button" @click="save">发布</button>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				img: [],
				price: 0,
				policy: {},
				userinfo: {},
				goods: {
					name: '',
					userId: '',
					senderName: '',
					userImg: '',
					detail: '',
					indexImg: '',
					price: 0,
					stock: 1,
					pictures: []
				}
			};
		},
		methods: {
			titleInput(e) {
				this.goods.name = e.detail.value;
			},
			// 选择照片
			selectPic() {
				uni.chooseMedia({
					count: 9, 
					mediaType: ["image"],
					success: res => {
						if (this.img.length == 0) {
							this.img = res.tempFiles;
							console.log(res.tempFiles[0].tempFilePath.split('/')[3]);
						} else {
							this.img = this.img.concat(res.tempFiles);
						}
					}
				});
			},
			// 删除照片
			deletePic(e) {
				this.img.splice(e, 1);
				uni.setNa
			},
			async uploadImg() {


			},
			setPrice() {
				uni.showModal({
					title: "设置价格",
					editable: true,
					placeholderText: '价格需要大于0',
					success: res => {
						if (res.confirm) {
							let now = parseFloat(res.content);
							console.log(now)
							if (now.toString() == "NaN" || now < 0) {
								uni.showToast({
									icon: 'error',
									title: "价格输入有误"
								})
								return;
							} else {
								this.price = now;
								this.goods.price = now;
							}
						}
					}
				})
			},
			 uploadImg() {
				const policy = this.policy.policy;
				const ossAccessKeyId = this.policy.accessId;
				const signature = this.policy.signature;
				const key = this.img[0].tempFilePath;
				const dir = this.policy.dir;
				const host = this.policy.host;
				let promise = new Promise((resolve) => {
					for(let n=0;n<this.img.length;n++){
						let item=this.img[n];
						wx.uploadFile({
							url: host, // 开发者服务器的URL。
							filePath: item.tempFilePath,
							name: 'file', // 必须填file。
							formData: {
								key: dir + item.tempFilePath.split('/')[3],
								policy: policy,
								OSSAccessKeyId: ossAccessKeyId,
								signature: signature,
							},
							success: (res) => {
								console.log(this.goods);
								if (n == 0) {
									this.goods.indexImg = host + '/' + dir + item.tempFilePath
										.split('/')[3];
								} else {
									let goodsNow = {
										url: host + '/' + dir + item.tempFilePath.split(
											'/')[3],
										sortOrder: n
									}
									this.goods.pictures.push(goodsNow);
								}
								if(n==this.img.length-1){
									resolve();
								}
							},
							fail: err => {
								console.log(err);
							}
						});
					}
						
					})
				return promise;

			},
			async save() {
				await this.uploadImg();
				const res = await uni.$http.post('/bbm/goods/saveGoods', this.goods);

			},
			async getPolicy() {
				const {
					data: res
				} = await uni.$http.get('/bbm/goods/oss/policy');
				this.policy = res.data;
				console.log(this.policy);
			}
		},
		onLoad() {
			this.getPolicy();
			this.userinfo = JSON.parse(uni.getStorageSync("userinfo"));
			this.goods.senderName = this.userinfo.name;
			this.goods.userId = this.userinfo.id;
			this.goods.userImg = this.userinfo.img;
		}
	}
</script>

<style lang="scss">
	.publish-container {
		height: 120rpx;
	}

	.publish {
		position: fixed;
		bottom: 0;
		width: 80%;
		margin: 0 10%;
		height: 90rpx;

		.publish-button {
			background-color: #ffeb37;
		}
	}

	.main-containner {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;

		.title {
			width: 100%;
			background-color: #e2e2e29d;
			border-radius: 30rpx;
			line-height: 40rpx;
		}
	}

	.img {
		margin-left: 37.5rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border-radius: 10px;

	}

	.img2 {
		margin-top: 10rpx;
		margin-right: 37.5rpx;
		width: 210rpx;
		height: 210rpx;
	}

	.img2 view {
		color: red;
		z-index: 5;
		position: relative;
		width: 20rpx;
		height: 20rpx;
		margin-top: 0rpx;
		margin-left: 90%;
	}

	.img2 image {
		width: 190rpx;
		height: 190rpx;
		position: relative;
		z-index: 5;
	}

	.des {
		padding-left: 40rpx;
		padding-top: 20rpx;
		font-size: 26rpx;
		color: #acacac;
		letter-spacing: 2rpx;
		line-height: 42rpx;
	}

	.last-containner {
		width: 90%;
		margin-top: 20rpx;
		margin-left: 5%;
		border-top: 2px #efefef solid;

		.price {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 40rpx;

			.price-num {
				color: #e00000;
			}
		}

	}
</style>